<template>
  <div id="login" class="component-wrap">
    <div class="login-content">
      <img src="../assets/bg_login@3x.png" class="login-bg" />
      <h2>聚好联资产管理系统</h2>
      <ul class="login-tab">
        <li @click="changeTab(index)" v-for="(item,index) in tabItem" :key="index">
          <span :class="{ 'hover': index === cur }">{{item}}</span>
        </li>
      </ul>
    </div>
    <div class="login-tab-content">
      <div v-if="cur===0">
        <form action="#">
          <div class="form-item">
            <input type="text" placeholder="请输入账号" class="border-radius" v-model="user" />
          </div>
          <div class="form-item" v-if="closePwd">
            <input type="password" placeholder="请输入密码" class="border-radius" v-model="pwd" />
            <img src="../assets/ic_code_close@3x.png" @click="openPwd" />
          </div>
          <div class="form-item" v-if="!closePwd">
            <input type="text" placeholder="请输入密码" class="border-radius" v-model="pwd" />
            <img src="../assets/ic_code_open@3x.png" @click="openPwd" />
          </div>
          <div class="login-btn" @click="login">登录</div>
          <p @click="forget">忘记密码</p>
        </form>
      </div>
      <div v-if="cur===1">
        <form action="#">
          <div class="form-item">
            <input type="tel" placeholder="请输入手机号" class="border-radius" v-model="phone" />
          </div>
          <div class="form-item">
            <input type="text" placeholder="请输入短信验证码" class="border-radius" v-model="code" />
            <span v-show="codeShow" @click="getCode">获取验证码</span>
            <span v-show="!codeShow">{{codeCount}}s后重发</span>
          </div>
          <div class="login-btn" @click="quickLogin">登录</div>
        </form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "Login",
    data:function(){
      return {
        cur: 0,
        tabItem: ["账号登录","快速登录"],
        user: "",
        pwd: "",
        phone: "",
        code: "",
        closePwd: true,
        codeShow: true,
        codeCount: '',
        timer: null,
      }
    },
    methods: {
      login:function(){
        if(this.user && this.pwd){
          this.$router.push({ path: '/home' })
        }
      },
      quickLogin:function(){
        if(this.phone && this.code){
          this.$router.push({ path: '/home' })
        }
      },
      forget:function(){
        this.$router.push({ path: '/forget' })
      },
      changeTab:function(idx){
        this.cur = idx
      },
      openPwd:function(){
        this.closePwd = !this.closePwd
      },
      getCode:function(){
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.codeCount = TIME_COUNT;
          this.codeShow = false;
          this.timer = setInterval(() => {
            if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
              this.codeCount--;
            } else {
              this.codeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      }
    }
  }
</script>

<style scoped>
  #login {
    width: 100%;
    min-height: 100vh;
    background: #fff;
  }
  #login .login-content{
    position: relative;
  }
  #login .login-content .login-bg {
    display: block;
    width: 100%;
  }
  #login .login-content h2 {
    position: absolute;
    top: 1.3rem;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 1.7rem;
    font-weight: normal;
  }
  #login .login-content .login-tab {
    display: flex;
    position: absolute;
    bottom: -0.35rem;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  #login .login-content .login-tab li{
    flex: 1;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.2rem;
  }
  #login .login-content .login-tab li .hover {
    color: rgba(255,255,255,1);
    font-size: 1.7rem;
    padding-bottom: 0.9rem;
    border-bottom: 0.3rem solid #0CC;
    font-weight: bold;
  }
  #login .login-tab-content {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
  }
  #login .login-tab-content form {
    margin-top: 3rem;
    overflow: hidden;
  }
  #login .login-tab-content form .form-item {
    position: relative;
    width: 83%;
    margin: 0 auto 2rem;

  }
  #login .login-tab-content form .form-item input {
    display: block;
    width: 100%;
    padding: 1rem 0 1rem 1rem;
    margin: 0 auto;
    border: 1px solid #EEEEEE;
    font-size: 1.5rem;
    color: #171717;
  }
  #login .login-tab-content form .form-item img {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    margin-top: -1.1rem;
    width: 2.2rem;
    height: 2.2rem;
  }
  #login .login-tab-content form .form-item span {
    position: absolute;
    top: 1.2rem;
    right: 1rem;
    font-size: 1.2rem;
    color: #00CCCC;
  }
  #login .login-tab-content form input::-webkit-input-placeholder {
    color: #ccc;
    font-size: 1.5rem;
  }
  #login .login-tab-content form .login-btn {
    width: 92%;
    margin: 3rem auto 2rem;
    padding: 1.2rem 0;
    text-align: center;
    font-size: 1.8rem;
    color: #FFFFFF;
    background: #2BB1FF;
    background-image: linear-gradient(44deg, #00CCCC 0%, #2BB1FF 100%);
    -webkit-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -moz-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -ms-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -o-box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    box-shadow: 0 0.4rem 0.4rem 0 rgba(0,204,204,0.25);
    -webkit-border-radius: 2.2rem;
    -moz-border-radius: 2.2rem;
    -ms-border-radius: 2.2rem;
    -o-border-radius: 2.2rem;
    border-radius: 2.2rem;
  }
  #login .login-tab-content form p {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #00CCCC;
    margin: 1.8rem auto 0;
  }
</style>
